{extend name="../layout/base"}
{block name="title"}{$web_title}{/block}
{block name="css"}
<link href="__CSS__/slide-unlock.css" rel="stylesheet">
<link href="__CSS__/login.css" rel="stylesheet">
<style>
.login-others-title .selected{font-size:14px!important;color:#999!important;}
</style>
{/block}
{block name="body"}

	<div class='read mhDeail'>
		<div class='head'>
			<table class='headTable head' cellpadding="0" cellspacing="0">
				<tr>
					<td class="head_left"><a href="javascript:history.back(-1);"><img src='__IMG__/readLeft.png' class='readHeadLeftImg'></a></td>
					<td align="center">漫阅云登录</td>
					<td class="head_right"><a href="/"><img src='__IMG__/bottomButOn2.png' class='readHeadLeftImg'></a></td>
				</tr>
			</table>
		</div>
	</div>
	<div class="content bottom-border">
        <div class="login-others">
            <div class="login-others-title">
                <div class="line"></div>
				<span data-login="2" >用户登录</span>
                <span data-login="1" class="selected">快捷登录</span>
                <div class="line"></div>
            </div>
        </div>
        <div class="login">
            <div class="web_login">
                <form name="loginForm">
					<input type="hidden" name="login" id="login" value="2"/>
					<input type="hidden" name="verif" id="verif" value="0"/>
					<input type="hidden" name="backurl" id="backurl" value="{$backurl}"/>
					<ul class="g_list" >
                        <li class="login1">
                            <label for="mobile">手机号码:</label>
                            <input id="mobile" class="inputstyle" maxlength="16" name="mobile" autocorrect="off"
                                   placeholder="请输入手机号码" type="text">
                        </li>						
                    
                        <li class="login2">
                            <label for="account">账号:</label>
                            <input id="account" class="inputstyle" name="username" autocomplete="off" placeholder="手机号">
                        </li>
                        <li class="login2">
                            <label for="password">密码:</label>
                            <input id="password" class="inputstyle" maxlength="16" name="password" autocorrect="off" placeholder="请输入密码" type="password">
                        </li>
					
						<li>
                            <div id="slider">
							<div id="slider_bg"></div>
							<span id="label">>></span> <span id="labelTip">拖动滑块验证</span> 
							</div>
                        </li>

						<li class="login1">
                            <label for="code">验证码:</label>
                            <input id="code" class="inputstyle" maxlength="16" type="text" name="code" id="code" autocorrect="off" placeholder="请输入短信验证码">
                            <div class="code">
                                <button type="button" id="code_phone" onclick="sendMessage()"> 获取验证码</button>
                            </div>
                        </li>
                    </ul>
                    <p class="switch">
                        <label for="remenber"><input id="remenber" name="usecookie" value="1" checked="checked" type="checkbox">自动登录</label>
                        <a href="/login/forget" class="right">忘记密码？</a>
                    </p>
                    <a href="javascript:void(0);" id="submit-login" class="btn_top"> 登 录</a>
                    <p class="login_tip">还没有账号？</p>
                    <a href="/register.html" class="btn_bottom weak"> 注册</a>
                </form>
            </div>
        </div>
    </div>
{/block}
{block name="bootem_js"}
<script src="__JS__/jquery.slideunlock.js"></script> 
<script>
    $(function () {
		$(".login1").each(function(i){
			$(this).hide();
		})
		$('.login-others-title span').click(function(){
			$(this).addClass('selected').siblings().removeClass('selected');
			var login = $(this).attr('data-login');
			if (login==1)
			{
				$(".login1").each(function(i){
					$(this).show();
				})
				$(".login2").each(function(i){
					$(this).hide();
				})
				$('#login').val(login);
			}else{
				$(".login1").each(function(i){
					$(this).hide();
				})
				$(".login2").each(function(i){
					$(this).show();
				})
				$('#login').val(login);
			}
			
		})

        var slider = new SliderUnlock("#slider",{
				successLabelTip : "验证成功"	
			},function(){
				$('#verif').val('1');
        	});
        slider.init();
    })

	function validateMobile() {
		var mobile = document.getElementById('mobile').value;
		var verif = document.getElementById('verif').value;
		console.log(mobile);
		if (mobile.length == 0) {
			layer.msg('手机号不能为空');
			document.getElementById('mobile').focus();
			return false;
		}
		var phoneReg = /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
		if (!phoneReg.test(mobile)) {
			layer.msg('请输入有效的手机号码');
			document.getElementById('mobile').focus();
			return false;
		}
		if(mobile.length != 11){
			layer.msg('请输入有效的手机号码');
			document.getElementById('mobile').focus();
			return false;
		}
		if(verif!=1){
			layer.msg('滑块验证未通过');
			//document.getElementById('captcha').focus();
			return false;
		}
		return true;
	}

	function sendMessage() {
		if (validateMobile()) {
			var form = $("form");
			console.log(form.serialize())
			$.ajax({
				type: 'POST',
				url: '/login/sendcode',
				data: form.serialize(),
				success: function(json){
					if(json.code == 1) {
						layer.msg("发送成功");
						$('#code_phone').attr("disabled", "disabled");
						var i = 61;
						timer();
						function timer() {
							i--;
							$('#code_phone').text(i + '秒后重发');
							if (i == 0) {
								clearTimeout(timer);
								$('#code_phone').removeAttr("disabled");
								$('#code_phone').text('重新发送');
							} else {
								setTimeout(timer, 1000);
							}
						}

					}
				},
			});
		}
	}
</script> 
<script type="text/javascript">
	
    $('#submit-login').click(function (event) {
		var login = document.getElementById('login').value;
		
		if (login==2)
		{
			if ($('#account').val() == '') {
				layer.msg('账号不能为空');
				return false;
			}
			if ($('#password').val() == '') {
				layer.msg('密码不能为空');
				return false;
			}
		}else{
			if ($('#code').val() == '') {
				layer.msg('验证码不能为空');
				return false;
			}
		}
		if ($('#verif').val() !=1) {
            layer.msg('滑块验证未成功');
            return false;
        }
        $.ajax({
            type: 'POST',
            url: '/login',
            data: $("form").serialize(),
            success: function (json) {
				console.log(json);
				
                if (json.code == "200") {
                    location.href = json.data.backurl;
                } else {
                    layer.alert(json.msg);
                }
            },
        });
    })

    $('#wechat_error').click(function () {
        layer.alert('&nbsp;&nbsp;本站不支持微信外登录', {icon: 5});
    })
</script>

{/block}